<template>
  <div class="goodsdetail">
    <Swiper :banner="banner"></Swiper>
    <Content :info="info"></Content>
    <Sku
      :specificationList="specificationList"
      :info="info"
      :productList="productList"
    ></Sku>
    <CommentList v-show="allCount != 0" :allCount="allCount"></CommentList>
    <div class="container" v-html="info.detail"></div>
    <Parameter v-show="attribute != ''" :attribute="attribute"></Parameter>
    <Issue :issue="issue"></Issue>
    <Grid :relatedGoods="relatedGoods"></Grid>
    <GoodsAction  :productList="productList"></GoodsAction>
  </div>
</template>

<script>
import API from "@/utils/api.js";
import Swiper from "@/components/GoodsDetail/Swiper.vue";
import Content from "@/components/GoodsDetail/Content.vue";
import Sku from "@/components/GoodsDetail/Sku.vue";
import Parameter from "@/components/GoodsDetail/Parameter.vue";
import Issue from "@/components/GoodsDetail/Issue.vue";
import Grid from "@/components/GoodsDetail/Grid.vue";
import GoodsAction from "@/components/GoodsAction.vue";
import CommentList from "@/components/GoodsDetail/CommentList.vue";


export default {
  name: "GoodsDetail",
  data() {
    return {
      id: this.$route.query.id,
      info: [],
      banner: [],
      attribute: [],
      issue: [],
      relatedGoods: [],
      specificationList: [],
      productList: [],
      allCount: 0,
    };
  },
  created() {
    this.getGoodsDetail();
    this.getComment();
  },
  methods: {
    getGoodsDetail() {
      this.$get(API.GET_GOODS_DETAIL, { id: this.id }).then((res) => {
        this.info = res.data.info;
        this.banner = res.data.info.gallery;
        this.issue = res.data.issue;
        this.relatedGoods = res.data.relatedGoods;
        this.attribute = res.data.attribute;
        this.specificationList = res.data.specificationList;
        this.productList = res.data.productList;
        console.log(res)
      })
    },
    // onBuyClicked() {},
    // onAddCartClicked() {},
    getComment() {
      this.$get(API.GET_COMMENT_COUNT, {
        type: 0,
        valueId: this.id,
      }).then((res) => {
        console.log(res);
        this.allCount = res.data.allCount;
      });
    },
  },
  components: {
    Swiper,
    Content,
    Sku,
    Parameter,
    Issue,
    Grid,
    GoodsAction,
    CommentList,
  },
};
</script>

<style lang="less" scoped>
.goodsdetail {
  margin-top: 46px;
  margin-bottom: 50px;
  position: relative;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  overflow-y: auto;
  color: #444;
  background-color: #f0f0f0;
  .container {
    /deep/p {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      img {
        width: 94%;
      }
      video{
        width: 94%;
        border-radius: 12px;
      }
    }
  }
}
</style>